<template>
  <div class="desc">
    <div class="item">
      <span class="tilte">歌手简介</span>
      <p class="briefDesc">{{desc.briefDesc}}</p>
    </div>
      <div class="item" v-for="(item,index) in desc.introduction" :key="index">
        <span class="tilte">{{item.ti}}</span>
      <p class="briefDesc">{{item.txt}}</p>
      </div>
  </div>
</template>

<script>
import {getSingeDescAPI} from '@/api'
export default {
    name:'SingerInfo',
    data() {
      return {
        desc:{},
        singername:''
      }
    },
    methods:{
      async getSingerInfo(){
        const res = await getSingeDescAPI({id:this.id});
        this.desc = res.data;
        this.singername = this.desc.briefDesc.slice(0,3)
      }
    },
    computed:{
      id(){
        return this.$route.query.id;
      }
    },
    created(){
      this.getSingerInfo();
    }
}
</script>

<style>
.desc{
  width: 95%;
  margin: 0 auto
}
.tilte{
  display: block;
  font-weight: bold;
  font-size: 18px;
  margin-left: 8px;
  margin-top: 10px;
  color: #333;
}
.briefDesc{
  font-size:16px;
  font-weight:lighter;
  text-indent: 24px;
  line-height: 2;
}
</style>